<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>html-sketchapp — Shadow DOM</title>
  <script>
    class TestEl extends HTMLElement {
      constructor() {
        super();
        this.attachShadow({mode: 'open'});
        console.log('test-el constructed');
      }

      connectedCallback() {
        this.shadowRoot.innerHTML = `
            <style>
              :host {
                display: block;
                font-family: Optimist, Arial, sans-serif;
              }
              button {
                background: #53cf92;
                border-radius: 4px;
                color: white;
                font-family: Optimist, Arial, sans-serif;
                font-size: 16px;
                padding: 10px;
              }
            </style>
            <h1>My custom button</h1>
            <button>Shadow content -> <slot></slot></button>
          `;
      }
    }

    customElements.define('test-el', TestEl);
  </script>
</head>

<body>
  <h2>Shadow DOM</h2>
  <test-el>Slotted content</test-el>
</body>

</html>
